@extends('layouts.app')

@section('content')

    <div class="col-md-10 offset-md-1">
        <div class="card ">

            <div class="card-body">
                <h2 class="">
                    <i class="far fa-edit"></i>
                    @if($topic->id)
                        编辑话题
                    @else
                        新建话题
                    @endif
                </h2>

                <hr>

                <form action="{{ $topic->id? route('topics.update', $topic->id):route('topics.store') }}"
                      method="POST" accept-charset="UTF-8" enctype="multipart/form-data">
                    @if($topic->id)
                        <input type="hidden" name="_method" value="PUT">
                    @endif

                    <input type="hidden" name="_token" value="{{ csrf_token() }}">

                    @include('shared._error')

                    <div class="form-group d-flex">

                        <select class="form-control flex-shrink-0 col-md-2 col-sm-3" name="category_id" required>
                            <option value="" hidden disabled
                                {{ old('category_id',$topic->category_id)?'':'selected' }}>
                                请选择分类
                            </option>
                            @foreach (get_categories() as $value)
                                <option value="{{ $value->id }}"
                                    {{ $value->id == old('category_id',$topic->category_id)?'selected':'' }}>
                                    {{ $value->name }}</option>
                            @endforeach
                        </select>

                        <input class="form-control ml-1" type="text" name="title"
                               value="{{ old('title', $topic->title ) }}" placeholder="请填写标题" required/>
                    </div>

                    <div class="form-group">
                        @foreach(\App\Models\Tag::with([])
                                    ->orderByDesc('topic_count')
                                    ->orderBy('name')
                                    ->get() as $tag)

                            <div class="custom-control custom-checkbox d-inline-block mr-2 mb-1">

                                <input type="checkbox" class="custom-control-input"
                                       {{ in_array($tag->id,(array)old('tags',$topic->tag_ids))?'checked':'' }}
                                       value="{{ $tag->id }}" name="tags[]" id="customCheck{{ $tag->id }}">
                                <label class="custom-control-label"
                                       for="customCheck{{ $tag->id }}">{{ $tag->name }}</label>
                            </div>
                        @endforeach
                    </div>

                    <div class="form-group w-100" id="body_md_editor">
                            <textarea name="body" class="form-control" rows="10" required
                                      placeholder="请填入至少三个字符的内容。"
                            >{{ old('body', $topic->body ) }}</textarea>
                    </div>

                    <div class="well well-sm d-flex justify-content-end">

                        <input type="hidden" name="publish" value="0">

                        <button type="submit" class="btn btn-primary submit-topic" data-publish="1">
                            <i class="fa fa-paper-plane-o mr-2"
                               aria-hidden="true"></i> 确定发布
                        </button>

                        <button type="submit" class="btn btn-success ml-3 submit-topic" data-publish="0">
                            <i class="far fa-save mr-2"
                               aria-hidden="true"></i> 保存草稿
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('/vendor/editor.md/css/editormd.min.css') }}"/>
    <style>
        .custom-checkbox > * {
            cursor: pointer;
        }
    </style>
@stop

@section('scripts')
    <script src="{{ asset('/vendor/editor.md/editormd.min.js') }}"></script>

    <script type="text/javascript">
        $(function () {

            $('.submit-topic').click(function () {
                $(this).siblings('input[name=publish]').val($(this).data('publish'));
            });

            //修正emoji图片错误
            editormd.emoji = {
                path: "//staticfile.qnssl.com/emoji-cheat-sheet/1.0.0/",
                ext: ".png"
            };
            var editor = editormd("body_md_editor", {
                required: true,
                placeholder: "请使用 Markdown 语法,至少输入三个字符的内容...",
                width: "100%",
                height: "600px",
                path: "/vendor/editor.md/lib/",
                // theme : "dark",
                // previewTheme : "dark",
                // editorTheme : "pastel-on-dark",
                // markdown : md,
                codeFold: true,
                syncScrolling: true,
                saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
                searchReplace: true,
                watch: true,                // 关闭实时预览
                htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
                toolbar: true,             //关闭工具栏
                previewCodeHighlight: true, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji: true,
                taskList: true,
                tocm: true,                  // Using [TOCM]
                tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,

                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "png", "gif", "bmp", "webp"],
                imageUploadURL: "{{ route('topics.upload_image') }}?_token={{csrf_token()}}",

                onload: function () {
                }
            });
        });
    </script>
@stop
